<template>
	<view class="content">
		<view class="" style="display: flex;">
			<u-button :plain="true" size="mini" :type="params.type===1?'success':''" :ripple="true" @click="clickbutton(1)">周末</u-button>
			<u-button :plain="true" size="mini" :type="params.type===4?'success':''" :ripple="true" @click="clickbutton(4)">明</u-button>
			<u-button :plain="true" size="mini" :type="params.type===3?'success':''" :ripple="true" @click="clickbutton(3)">今</u-button>
			<u-button :plain="true" size="mini" :type="params.type===2?'success':''" :ripple="true" @click="clickbutton(2)">昨</u-button>
			<u-button :plain="true" size="mini" :type="params.type===5?'success':''" :ripple="true" @click="clickbutton(5)">周</u-button>
			<u-button :plain="true" size="mini" :type="params.type===6?'success':''" :ripple="true" @click="clickbutton(6)">月</u-button>
			<!-- <u-calendar v-model="show" :mode="mode" @change="changedate" max-date="9999-12-31"></u-calendar> -->
			<rangeDatePick 
			    :show="show"
			    @showchange="showchange"
			    start="2015-01-01"
			    end="2200-12-01"
			    :value="[start,end]"
			    @change="changedate"
			    @cancel="show = false"
			    themeColor="#19be6b"
			    fields='day'
			></rangeDatePick>
			<u-button :type="params.type===0?'success':''" size="mini" :plain="true" @click="show = true">
				<u-icon name="calendar" size="28"></u-icon>
			</u-button>
		</view>
		<view class="" style="margin-top: 10px;">
			<view class="" style="margin-top: 20px;">
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<text style="font-weight: bold;">咨询数据</text>
					<view class="">
						<u-select v-model="shows" clearabled :list="projectselect" @confirm="confirm"></u-select>
						<u-input style="width: 150px;" v-model="projectvalue" placeholder="项目选择" type="select" border="border" @click="shows = true" />
					</view>
				</view>
				<u-table border-color="null" style="margin-top: 10px;">
					<u-tr class="u-tr">
						<u-th class="u-th" v-for="item in projecttitle">{{item}}</u-th>
					</u-tr>
					<u-tr class="u-tr" style="height: 76rpx;" v-for="item in projectlist">
						<u-td class="u-td">{{item.member}}</u-td>
						<u-td class="u-td">{{item.add_count}}</u-td>
						<u-td class="u-td">{{item.appointment_count}}</u-td>
						<u-td class="u-td">{{item.revisiting_count}}</u-td>
						<u-td class="u-td">{{item.callback_count}}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>
		<u-mask :show="loading" :mask-click-able="false">
			<view class="warp">
				<u-loading mode="circle" :show="loading" size="55" color="#19be6b"></u-loading>
			</view>
		</u-mask>
		<u-tabbar :list="vuex_tabbar"></u-tabbar>
	</view>
</template>
<script>
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	export default {
		components: {rangeDatePick},
		data() {
			return {
				loading: false,
				show: false,
				shows: false,
				showclue: false,
				params: {type: 3, start_time: '', end_time: '', project_id: 0},
				mode: 'range',
				buttonshow: 2,
				projecttitle:['人员','新增','预到','到诊','已回访'],
				projectlist: [],
				projectselect: [],
				projectvalue: '全部'
			}
		},
		onLoad() {
			this.initial()
		},
		computed: {
		  end() {
		  			var date = new Date();
		  			var currentMonth = date.getMonth();
		  			var nextMonth = ++currentMonth;
		  			var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
		  			var oneDay = 1000 * 60 * 60 * 24;
		  			var lastTime = new Date(nextMonthFirstDay - oneDay);
		  			var month = parseInt(lastTime.getMonth() + 1);
		  			var day = lastTime.getDate();
		  			if (month < 10) {
		  								month = '0' + month
		  			}
		  			if (day < 10) {
		  								day = '0' + day
		  			}
		  			return date.getFullYear() + '-' + month + '-' + day;
		  },
		  start() {
		  			var date = new Date();
		  			date.setDate(1);
		  			var month = parseInt(date.getMonth() + 1);
		  			var day = date.getDate();
		  			if (month < 10) {
		  								month = '0' + month
		  			}
		  			if (day < 10) {
		  								day = '0' + day
		  			}
		  			return date.getFullYear() + '-' + month + '-' + day;
		  }
		},
		created() {
			this.dd.ready(() => {
				this.dd.biz.navigation.setTitle({
				  title: "咨询", 
				})
			 })
		},
		methods: {
			initial() {
				this.$u.api.report_project_project_list().then(res=>{
					this.projectselect = []
					this.projectselect = res
					this.projectselect.unshift({label: '全部', value: 0})
					this.askData()
				})
			},
			askData() {
				this.loading = true
				this.$u.api.report_report_report_member(this.params).then(res=>{
					this.projectlist = res
					this.loading = false
				})
			},
			clickbutton(type) {
				this.params.type = type
				this.askData()
			},
			showchange(){ this.show=false },
			changedate(e) {
				console.log(e)
				this.params.type = 0
				this.params.start_time = e[0]
				this.params.end_time = e[1]
				this.askData()
				this.show = false
			},
			confirm(e) {
				this.projectvalue = e[0].label
				this.params.project_id = e[0].value
				this.askData()
			}
		}
	}
</script>
<style>
	.content{
		padding: 10rpx 20rpx;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>
